<template>
  <div>
    <div class="menu">
      <div class="box"
           :class="change==item.path?'show':''"
           v-for= "(item,index) in menulist"
           v-bind:key="index"
      @click="lock(index)">
        {{item.title}}
      </div>


    </div>


  </div>
</template>

<script>
export default {
  data(){
    return{
      menulist:[
        {path:'/recommend',title:'推荐'},
        {path: '/toplist',title: '排行榜'},
        {path: '/playlist',title: '歌单'},
        {path: '/djradio',title: '主播电台'},
        {path: '/artlist',title: '歌手'},
        {path: '/album',title: '新碟上架'}
      ],
      // watch需要定义的那个变量 使用computed需要注释掉
      // change:''
    }
  },
  methods:{
    lock(index){
   let path = this.menulist[index].path;
      this.$router.push(path);
    }

  },
  // created() {
  //  this.change=this.$route.path;
  // },
  // watch:{
  //   "$route.path"(newValue,oldValue){
  //     this.change=newValue;
  //
  //   }
  // }
computed:{
    change(){
      return this.$route.path;
    }
}
}
</script>

<style  scoped>
html,body{
  width: 100%;
  padding: 0;
  margin: 0;
}
.menu{

  display: flex;
  align-items: center;
justify-content: center;
  width: 100%;
  height: 40px;
  background-color: #ff2227;
}
.box{
  margin: 0 20px;
  cursor: pointer;
  height: 40px;
  line-height: 40px;

}


.show{
  //line-height: 60px;
  //margin-top: -20px;
  border-radius: 25px;
  background: rgba(0,0,0,.25);

}
</style>